<style include="settings-shared passwords-shared md-select action-link">
      cr-input:not(:first-of-type) {
        margin-top: var(--cr-form-field-bottom-spacing);
      }

      cr-icon-button {
        --cr-icon-button-icon-size: 16px;
        margin-inline-start: 2px;
      }

      #footnote {
        margin-inline-start: 2px;
        margin-top: 16px;
      }

      #storageDetails {
        margin-bottom: 16px;
        margin-inline-start: 2px;
      }

      cr-input {
        --cr-input-error-display: none;
      }

      #websiteInput[invalid].has-error-message,
      #usernameInput[invalid] {
        --cr-input-error-display: block;
      }

      .md-select {
        --md-select-width: 100%;
        margin-bottom: var(--cr-form-field-bottom-spacing);
        margin-top: 2px; /* Needed to avoid outline cropping */
      }

      #viewExistingPasswordLink {
        display: block;
        font-size: var(--cr-form-field-label-font-size);
        line-height: 1;
        width: fit-content;
      }
    </style>
    <cr-dialog id="dialog" close-text="$i18n{close}" show-on-attach>
      <div slot="title" id="title">[[getTitle_(dialogMode_)]]</div>
      <div slot="body">
        <div hidden="[[!shouldShowStorageDetails_(isAccountStoreUser,
            dialogMode_)]]" id="storageDetails">
          [[getStorageDetailsMessage_(dialogMode_)]]
        </div>
        <select class="md-select" id="storePicker"
            autofocus="[[shouldShowStorePicker_(isAccountStoreUser,
                dialogMode_)]]"
            aria-description="$i18n{addPasswordStorePickerA11yDescription}"
            hidden="[[!shouldShowStorePicker_(isAccountStoreUser,
                dialogMode_)]]">
          <option value="[[storeOptionAccountValue]]">
            [[getStoreOptionAccountText_(accountEmail, dialogMode_)]]
          </option>
          <option value="[[storeOptionDeviceValue]]">
            $i18n{addPasswordStoreOptionDevice}
          </option>
        </select>
        <cr-input id="websiteInput" label="$i18n{editPasswordWebsiteLabel}"
            class$="[[getClassForWebsiteInput_(websiteInputErrorMessage_)]]"
            autofocus="[[shouldAutofocusWebsiteInput_(isAccountStoreUser,
                dialogMode_)]]"
            value="[[getWebsite_(dialogMode_, existingEntry.urls.link)]]"
            on-blur="onWebsiteInputBlur_" placeholder="example.com"
            on-input="validateWebsite_"
            required="[[isWebsiteEditable_(dialogMode_)]]"
            invalid="[[websiteInputInvalid_]]"
            error-message="[[websiteInputErrorMessage_]]"
            readonly="[[!isWebsiteEditable_(dialogMode_)]]">
        </cr-input>
        <cr-input id="usernameInput" label="$i18n{editPasswordUsernameLabel}"
            readonly="[[isInViewMode_]]" invalid="[[usernameInputInvalid_]]"
            value="{{username_}}"
            error-message="[[getUsernameErrorMessage_(websiteUrls_.shown)]]">
        </cr-input>
        <a id="viewExistingPasswordLink" is="action-link"
            on-click="onViewExistingPasswordClick_"
            aria-description="[[getViewExistingPasswordAriaDescription_(
                websiteUrls_.shown, username_)]]"
            hidden="[[!usernameInputInvalid_]]">$i18n{viewExistingPassword}</a>
        <cr-input id="passwordInput" label="$i18n{editPasswordPasswordLabel}"
            type="[[getPasswordInputType_(isInViewMode_, isPasswordVisible_)]]"
            value="{{password_}}" class="password-input"
            readonly="[[isInViewMode_]]" required="[[!isInViewMode_]]"
            auto-validate="[[!isInViewMode_]]">
          <template is="dom-if" if="[[!isInViewMode_]]">
            <cr-icon-button id="showPasswordButton"
                class$="[[getIconClass_(isPasswordVisible_)]]"
                slot="suffix" on-click="onShowPasswordButtonClick_"
                title="[[showPasswordTitle_(isPasswordVisible_)]]">
            </cr-icon-button>
          </template>
        </cr-input>
        <div id="footnote" hidden="[[isInViewMode_]]">
          [[getFootnote_(dialogMode_, existingEntry.urls.shown)]]
        </div>
      </div>
      <div slot="button-container">
        <cr-button id="cancel" class="cancel-button" on-click="onCancel_"
            hidden="[[isInViewMode_]]">
          $i18n{cancel}
        </cr-button>
        <cr-button id="actionButton" class="action-button"
            on-click="onActionButtonClick_"
            disabled="[[isSaveButtonDisabled_]]">
          [[getActionButtonName_(isInViewMode_)]]
        </cr-button>
      </div>
    </cr-dialog>
